<template>
  <div>
    <div>
        <div class="hospSetList" @click="getList()">医院设置列表</div>
        <el-button style="margin-left: 30px;float: left;margin-top: 30px" type="danger" round @click="removeHospSetByIdList()">批量删除</el-button>
        <el-form :inline="true" :model="hospitalSetQueryVo" style="margin-top: 30px;text-align: center" class="demo-form-inline">
          <el-form-item label="医院名称">
            <el-input v-model="hospitalSetQueryVo.hosname" placeholder="医院名称"/>
          </el-form-item>
          <el-form-item label="医院编号">
            <el-input  v-model="hospitalSetQueryVo.hoscode" placeholder="医院编号"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList()">查询</el-button>

          </el-form-item>
        </el-form>
        <el-table :data="hospSetList" style="width: 100%;z-index: 0" @selection-change="handleSelectionChange"  :cell-style="tableRowClassName"  :default-sort = "{prop: 'date', order: 'descending'}"  >
          <el-table-column type="selection" width="55"/>
          <el-table-column type="index" width="80" align="center" label="序号"/>
          <el-table-column prop="hosname"  label="医院名称"  align="center" sortable />
          <el-table-column prop="hoscode" label="医院编号" align="center" sortable />
          <el-table-column prop="apiUrl" label="api基础路径" align="center" sortable />
          <el-table-column prop="contactsName" label="联系人名称" align="center" sortable />
          <el-table-column prop="contactsPhone" label="联系人手机" align="center" sortable />
          <el-table-column  label="状态" align="center"  width="150">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status===1"
                active-color="#13ce66"
                inactive-color="#ff4949"  @change="updateStatus(scope.row.id,scope.row.status)" />
              <el-tag type="success" v-if="scope.row.status===1">可用</el-tag>
              <el-tag type="danger" v-else>不可用</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150">
            <template slot-scope="scope">
              <label class="btn btn-info active" style="margin-right:20px;">
              <el-link type="primary" icon="el-icon-edit" @click="findHospSetById(scope.row.id)">编辑</el-link>
              </label>
              <el-link type="danger" icon="el-icon-delete" @click="removeHospSet(scope.row.id)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination align="center" style="margin-top:50px;width: 100%" @size-change="handleSizeChange"
                         @current-change="handleCurrentChange" :current-page="current" :page-sizes="[5, 10, 15, 20]"
                         :page-size="size" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"/>
        </div>

      </div>
    <div>
      <section class="app-main">
        <transition name="hehe" mode="out-in">
          <Update v-show="showModal" :hospitalSet="hospitalSet" @getList="getList" @closeme="closeme"/>
        </transition>
      </section>
    </div>

  </div>

</template>

<script>
import hospSet from "@/api/hospSet";
import Update from '@/components/hospSet/Update'
export default {
  name: "List",
  components:{
    Update
  },
  data(){
    return {
      size:5,
      current:1,
      hospitalSetQueryVo:{},
      hospSetList:[],
      total:0,
      showModal: false,   // 是否显示模态框
      hospitalSet:{},
      multipleSelection:[]
    }
  },
  methods:{
    //获取医院设置列表
    getList(current=1,size=5){
      this.current = current;
      this.size = size;
      hospSet.getHospSetList(this.current,this.size,this.hospitalSetQueryVo)
        .then(request =>{
          this.hospSetList = request.data.records
          this.total = request.data.total
          this.current = request.data.current
          this.size = request.data.size
        })
        .catch(error =>{
          this.$message.error('抱歉，获取医院设置列表失败，请与IT管理员联系');
        });
    },
    //根据状态显示不同的背景颜色
    tableRowClassName({row}) {
      if (row.status === 1) {
        return ' background: #E7F2E7';
      } else {
        return ' background: #FFF0F5';
      }
    },
    //修改医院设置状态
    updateStatus(id,status){
      if (status===1){
        hospSet.updateHospSetStatus(id,0)
        .then(request =>{
          if(request.code ===200 && request.message ==='成功'){
            this.$message({
              message: '恭喜你，修改成功，id为'+id+'的医院已经不可用了',
              type: 'success'
            });
            this.getList(this.current,this.size);
          }
        })
        .catch(error =>{
          this.$message.error('抱歉，修改失败，请与IT管理员联系');
        });
      }else {
        hospSet.updateHospSetStatus(id,1)
          .then(request =>{
            if(request.code ===200 && request.message ==='成功') {
              this.$message({
                message: '恭喜你，修改成功，id为' + id + '的医院已经可用了',
                type: 'success'
              });
              this.getList(this.current, this.size);
            }
          })
          .catch(error =>{
            this.$message.error('抱歉，修改失败，请与IT管理员联系');
          });
      }
    },
    //分页查询  通过当前页数展示条数
    handleSizeChange(size){
     this.getList(this.current,size)
    },
    //分页查询  通过当前展示条数，切换页码
    handleCurrentChange(page){
    this.getList(page,this.size)
    },
    //根据id查询单挑医院设置信息
    findHospSetById(id){
      hospSet.findHospSetById(id)
        .then(request =>{
          this.toggleModal()
          this.hospitalSet=request.data
          this.hospitalSet.size=this.size
          this.hospitalSet.current=this.current
        })
        .catch(error => {
          this.$message.error('抱歉，获取医院设置信息失败，请与IT管理员联系');
        })
    },
    //根据id删除单挑医院设置信息
    removeHospSet(id){
      this.$confirm('此操作将永久删除该医院设置信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        hospSet.removeHospSet(id)
          .then(request =>{
            if(request.code ===200 && request.message ==='成功') {
              this.$message({
                message: '恭喜你，删除成功，id为' + id + '的医院已经成功删除',
                type: 'success'
              });
              this.getList(this.current, this.size);
            }
          })
          .catch(error => {
            this.$message.error('抱歉，删除医院设置信息失败，请与IT管理员联系');
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    toggleModal:function(){
      this.showModal = !this.showModal;
    },
    closeme:function(){
      this.showModal = !this.showModal;
    },
    //批量删除医院设置信息
    removeHospSetByIdList(){
      this.$confirm('此操作将永久删除该医院设置信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let idList=[]
        for (let i = 0; i < this.multipleSelection.length; i++) {
          idList.push(this.multipleSelection[i].id);
        }
        hospSet.removeHospSetByIdList(idList)
          .then(request =>{
            if(request.code ===200 && request.message ==='成功') {
              this.$message({
                message: '恭喜你，删除成功，id为' + idList + '的医院已经被删除了',
                type: 'success'
              });
              this.getList(this.current, this.size);
            }
          })
          .catch(error => {
            this.$message.error('抱歉，删除医院设置信息失败，请与IT管理员联系');
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //获取选中行信息赋值给multipleSelection
    handleSelectionChange(rows) {
      this.multipleSelection = rows;
    },
  },
  created() {
      this.getList(this.current,this.size);
  }
}
</script>

<style>
.hospSetList{
  color: #000000;
  font-family: "Helvetica Neue",serif;
  font-size: 30px;
  line-height: 50px;
  margin-left: 50px;
  margin-top: 20px ;
}
.app-main {
  /*50 = navbar  */
  min-height: calc(100vh - 50px);
  position: relative;
  overflow: hidden;
}
</style>
